<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
    </view>

    <!-- 页面内容 -->
    <view class="content">
      <!-- Logo 和标题 -->
      <view class="header">
        <text class="logo-icon">🎬</text>
        <view class="logo-text-wrapper">
          <text class="logo-title">CSora2</text>
          <text class="logo-subtitle">AI Video Creator</text>
        </view>
      </view>

      <!-- 注册表单 -->
      <view class="form-card">
        <view class="form-title">
          <text class="title-text">创建账号</text>
          <text class="title-desc">注册即可开始AI视频创作之旅</text>
        </view>

        <view class="form-view">
          <view class="form-item">
            <view class="input-icon">
              <text class="icon">&#xf10b;</text>
            </view>
            <input
              class="form-input"
              v-model="form1.mobile"
              type="text"
              :maxlength="11"
              placeholder="手机号"
            />
          </view>

          <view class="form-item">
            <view class="input-icon">
              <text class="icon">&#xf023;</text>
            </view>
            <input
              class="form-input"
              v-model="form1.password"
              type="password"
              placeholder="请输入密码"
            />
          </view>

          <view class="form-item">
            <view class="input-icon">
              <text class="icon">&#xf084;</text>
            </view>
            <input
              class="form-input"
              v-model="form1.password2"
              type="password"
              placeholder="请再次输入密码"
            />
          </view>

          <view class="form-item code-item">
            <view class="input-icon">
              <text class="icon">&#xf0e0;</text>
            </view>
            <input
              class="form-input code-input"
              v-model="form1.code"
              type="number"
              :maxlength="6"
              placeholder="请输入验证码"
            />
            <vk-data-verification-code
              class="code-btn"
              seconds="60"
              :mobile="form1.mobile"
              type="register"
            ></vk-data-verification-code>
          </view>
        </view>

        <!-- 用户协议 -->
        <view class="agreement">
          <checkbox-group @change="checkboxChange">
            <label class="agreement-label">
              <checkbox
                class="agreement-checkbox"
                value="true"
                :checked="form1.agreement"
                color="#8b5cf6"
              ></checkbox>
              <text class="agreement-text">
                我已阅读并同意
                <navigator url="" class="agreement-link"
                  >《用户协议》</navigator
                >
              </text>
            </label>
          </checkbox-group>
        </view>

        <!-- 注册按钮 -->
        <view class="login-btn">
          <button class="btn-login" @click="loginBySms">
            <text class="btn-icon">&#xf234;</text>
            <text class="btn-text">注 册</text>
          </button>
        </view>
      </view>

      <!-- 底部链接 -->
      <view class="footer">
        <text class="footer-text">已有账号？</text>
        <navigator
          url="../index/index"
          class="footer-link"
          open-type="redirect"
        >
          立即登录
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
let vk = uni.vk;
export default {
  data() {
    // 页面数据变量
    return {
      // init请求返回的数据
      data: {},
      // 表单请求数据
      form1: {
        agreement: true,
        mobile: "",
        password: "",
        password2: "",
        code: "",
        type: "register",
      },
      scrollTop: 0,
      isRotate: false,
      logoImage: "/static/logo.png",
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  // 监听 - 页面每次【加载时】执行(如：前进)
  onLoad(options) {
    //console.log("onLoad",options);
    vk = uni.vk;
    this.init(options);
  },
  // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
  onShow() {},
  // 监听 - 页面每次【隐藏时】执行(如：返回)
  onHide() {},
  // 监听 - 页面下拉刷新
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  // 监听 - 点击右上角转发时
  onShareAppMessage(options) {},
  // 函数
  methods: {
    // 页面数据初始化函数
    init(options = {}) {
      console.log("init: ", options);
    },
    pageTo(path) {
      vk.navigateTo(path);
    },
    checkboxChange(e) {
      let that = this;
      let value = e.detail.value || [];
      if (value.length > 0 && value[0]) {
        that.form1.agreement = true;
      } else {
        that.form1.agreement = false;
      }
    },
    // 登录(手机号+验证码) 不存在会自动注册
    loginBySms() {
      let that = this;
      if (that.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      const { agreement, mobile, code, password, password2 } = that.form1;
      if (!agreement) {
        vk.toast("请阅读并同意用户服务及隐私协议", "none");
        return;
      }
      if (!vk.pubfn.test(mobile, "mobile")) {
        vk.toast("请输入正确的手机号码", "none");
        return;
      }
      if (!vk.pubfn.test(password, "pwd")) {
        vk.toast(
          "密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线",
          "none"
        );
        return;
      }
      if (!vk.pubfn.test(password2, "pwd")) {
        vk.toast(
          "密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线",
          "none"
        );
        return;
      }
      if (password != password2) {
        vk.toast("两次密码必须相同!", "none");
        return;
      }
      if (!vk.pubfn.test(code, "mobileCode")) {
        vk.toast("验证码格式为6位数字", "none");
        return;
      }
      that.isRotate = true;
      vk.userCenter.loginBySms({
        data: that.form1,
        success: (data) => {
          that.isRotate = false;
          if (data.type == "login") {
            vk.toast("登录成功!");
          } else {
            vk.toast("注册成功!");
          }
          setTimeout(() => {
            // 跳转到首页,或页面返回
            let pages = getCurrentPages();
            if (pages.length > 1) {
              vk.navigateBack();
            } else {
              // 进入首页
              vk.navigateToHome();
            }
          }, 1000);
        },
        complete: () => {
          that.isRotate = false;
        },
      });
    },
  },
  // 计算属性
  computed: {},
};
</script>
<style lang="scss" scoped>
@import url("../css/main.css");
</style>
